<template>
  <div class="all_baidu_map">
    <baidu-map class="bm-view" ref="box" ak="lxCGtxzYDf1rK69UBspuzmxYkuYH725Q" :center="center" :zoom="zoom"
               @ready="handler">
    </baidu-map>
    <!--:class="{theme_color:buttonName === item.button}"-->
    <div class="baidu_map_button">
      <div ref="baidu_map_button" v-for="(item,index) in buttonMenu" @click="Hover(item.button,index)">{{item.title}}
      </div>
    </div>

  </div>

</template>
<script>
  import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

  export default {
    props:{
      positionArray:{
        type:Array,
      },
      buildName:{
        type: String
      }
    },
    name: 'BuildMap',
    data() {
      return {
        center: {lng: 0, lat: 0},
        zoom: 3,
        BMap: null,
        map: null,
        buttonMenu: [
          {title: '重置', button: 'reset'},
          {title: '银行', button: '银行'},
          {title: '医院', button: '医院'},
          {title: '学校', button: '学校'},
          {title: '商场', button: '商场'}
        ]
      }
    },
    methods: {
      handler({BMap, map}) {
        this.center.lng = this.positionArray[0]; //经度   x
        this.center.lat = this.positionArray[1];  //纬度   y
        let markergg = new BMap.Marker(new BMap.Point(this.center.lng,this.center.lat));
        map.addOverlay(markergg); //添加GPS marker
        let labelgg = new BMap.Label(this.buildName,{offset:new BMap.Size(20,-10)});
        markergg.setLabel(labelgg); //添加GPS label
        //console.log(this.positionArray[0]);
        //console.log('======');
        //console.log(this.positionArray[1]);
        this.zoom = 15; //搜索级别
        this.BMap = BMap;
        this.map = map;
        // var local = new BMap.LocalSearch(map,
        // 	{ renderOptions:{map: map}});
        // local.searchInBounds(this.items, map.getBounds());
      },
      reset() {
        let ggPoint = new this.BMap.Point(this.center.lng, this.center.lat);
        //this.map = new this.BMap.Map(this.$refs.box);
        this.map.clearOverlays(); //清除所有标注
        this.map.centerAndZoom(ggPoint, this.zoom);
        let markergg = new BMap.Marker(new BMap.Point(this.center.lng,this.center.lat));
        this.map.addOverlay(markergg); //添加GPS marker
        let labelgg = new BMap.Label(this.buildName,{offset:new BMap.Size(20,-10)});
        markergg.setLabel(labelgg); //添加GPS label
      },
      Hover(str, index) {
        if (index !== 0) {
          this.$refs.baidu_map_button[index].classList.add('theme_color');
        } else {
          for (let i = 0; i < this.$refs.baidu_map_button.length; i++) {
            this.$refs.baidu_map_button[i].classList.remove('theme_color');
          }
        }

        // //console.log(this.$refs.baidu_map_button[index].classList.add('theme_color'));
        if (str === 'reset') {
          return this.reset();
        }
        new this.BMap.LocalSearch(this.map, {renderOptions: {map: this.map}}).searchInBounds(str, this.map.getBounds())
      }
    },
    components: {
      BaiduMap
    }
  }
</script>

<!--Add"scoped" attribute to limit CSS to this component only -->
<style scoped>
  .bm-view {
    width: 100%;
    height: 200px;
  }

  .all_baidu_map .baidu_map_button {
    display: flex;
    justify-content: space-between;
    padding: 10px 0 0 0;
  }
</style>
